import React, { Component } from 'react';

import {Icon,Row, Col } from 'antd';
import {NavLink} from 'react-router-dom';
import {classify} from "./news.json";
import "../css/index.css";
class News extends Component {
	render() {
		return (
			<div>
				<header className='cla-header'>
					<div className='flex'>
						<NavLink to='/'>
							<div className='cla-fh' >
							<Icon type="left"/>
						</div>
						</NavLink>
						
						<span className='span'>新书</span>
					</div>
					<div className='flex'>
						<div className='flex-margin' >
							<Icon type="search"/>
						</div>
						<div className='flex-margin'>
							<Icon type="menu" />
						</div>
					</div>
				</header>
				<main>
					<div className='cla-title'>
						<h3>大神新书</h3>
					</div>
					<Row>
						{
							classify.map((item)=>{
								return (
									<Col span={24} key={item.id}>
										<div className='new-book'>
											<img className='new-book-img' src={item.img} alt=""/>
											<div >
												<h4 className='new-h4'>{item.span}</h4>
												<p className='book-desc'>
													{item.p}
												</p>
											</div>
										</div>
										<div className='new-border'></div>
									</Col>
								)
							})
						}
					</Row>
					<div className='cla-title'>
						<h3>最新上架</h3>
					</div>
					<Row>
						{
							classify.map((item)=>{
								return (
									<Col span={24} key={item.id}>
										<div className='new-book'>
											<img className='new-book-img' src={item.img} alt=""/>
											<div >
												<h4 className='new-h4'>{item.span}</h4>
												<p className='book-desc'>
													{item.p}
												</p>
											</div>
										</div>
										<div className='new-border'></div>
									</Col>
								)
							})
						}
					</Row>
				</main>
				<footer>
					<div className='cla-footer'>
						<div>
							<div className='cla-span'>登录后获得更多特色功能·</div>
							<NavLink to='/login'>立即登录</NavLink>
						</div>
					</div>
				</footer>
			</div>
		);
	}
}

export default News;